<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>操作表格</title>
  </head>
  <body></body>
  <script>
    /* 1.表格是 HTML 中最复杂的结构之一。通过 DOM 编程创建<table>元素，通常要涉及大量标签，包括表行、表元、表题，等等。因此，通过 DOM 编程创建
     *   和修改表格时可能要写很多代码。
     * 2.采用HTML DOM 给<table>、<tbody>和<tr>元素添加了一些属性和方法。采用这些方法将极大的减少代码量，而且代码逻辑
     *   清晰。易于理解。（具体添加了哪些属性和方法见md文档）。
     */
    function checkOperatingTableDOM() {
      //创建table
      let tableDOM = document.createElement("table");
      tableDOM.border = "1"; //(MDN建议采用style属性样式，可以实现同样效果)
      tableDOM.style = "border-collapse:collapse;background-color:orange;";
      tableDOM.cellPadding = "10px";
      //创建caption
      let captionDOM = document.createElement("caption");
      captionDOM.appendChild(document.createTextNode("Awesome caption"));
      tableDOM.appendChild(captionDOM);
      //创建tbody
      let tbodyDOM = document.createElement("tbody");
      //创建两行两列单元格
      for (let i = 0; i < 9; i++) {
        let trDOM = document.createElement("tr");
        if (i === 0) {
          //创建第一行的展示目录
          //创建文档片段
          let frame = document.createDocumentFragment();
          let column_1 = document.createElement("th");
          column_1.appendChild(document.createTextNode("学号"));
          let column_2 = document.createElement("th");
          column_2.appendChild(document.createTextNode("用户名"));
          let column_3 = document.createElement("th");
          column_3.appendChild(document.createTextNode("年龄"));
          let column_4 = document.createElement("th");
          column_4.appendChild(document.createTextNode("成绩"));
          let column_5 = document.createElement("th");
          column_5.appendChild(document.createTextNode("操作"));
          //将生成的DOM添加到文档片段中保存
          frame.appendChild(column_1);
          frame.appendChild(column_2);
          frame.appendChild(column_3);
          frame.appendChild(column_4);
          frame.appendChild(column_5);
          //将文档片段添加到页面中
          trDOM.appendChild(frame);
        } else {
          for (let j = 0; j <= 4; j++) {
            let tdDOM = document.createElement("td");
            if (j === 0) {
              tdDOM.appendChild(
                document.createTextNode(
                  "2020" + Math.ceil(Math.random() * 1000)
                )
              );
            }
            if (j === 1) {
              tdDOM.appendChild(
                document.createTextNode(
                  "2020" + Math.ceil(Math.random() * 1000)
                )
              );
            }
            if (j === 2) {
              tdDOM.appendChild(
                document.createTextNode("" + Math.ceil(Math.random() * 100))
              );
            }
            if (j === 3) {
              tdDOM.appendChild(
                document.createTextNode(Math.ceil(Math.random() * 100))
              );
            }
            if (j === 4) {
              let deleteBtn = document.createElement("button");
              deleteBtn.style =
                "background-color:orange;outline:none;border:none";
              deleteBtn.innerHTML = "删除";
              deleteBtn.onclick = function (e) {
                tbodyDOM.removeChild(e.target.parentNode.parentNode);
              };
              tdDOM.appendChild(deleteBtn);
            }
            trDOM.appendChild(tdDOM);
          }
        }
        //4.表格添加到父元素中
        tbodyDOM.appendChild(trDOM);
      }
      //5.将表格添加到文档中
      tableDOM.appendChild(tbodyDOM);
      document.body.appendChild(tableDOM);
    }
    // checkOperatingTableDOM();

    /**2.采用 HTML DOM 属性和方法语义化创建表格
     * 
     * **/
    function checkOperatingTableAttribute() {
      // 创建表格
      let table = document.createElement("table");
      table.border = 1;
      table.width = "100%";
      // 创建表体
      let tbody = document.createElement("tbody");
      table.appendChild(tbody);
      // 创建第一行
      tbody.insertRow(0);
      tbody.rows[0].insertCell(0);
      tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
      tbody.rows[0].insertCell(1);
      tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
      // 创建第二行
      tbody.insertRow(1);
      tbody.rows[1].insertCell(0);
      tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
      tbody.rows[1].insertCell(1);
      tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
      // 把表格添加到文档主体
      document.body.appendChild(table);
    }
    checkOperatingTableAttribute();
  </script>
</html>
